<template>
  <div class="grey_bg">
    <navigate> 咨询师详情 </navigate>
    <div class="main_content">
      <div class="block_item user_info">
        <img :src="joinUrlImg(info.user_avatar)" alt="" class="user_avatar" />
        <div class="user_detail">
          <div class="detail_row1">
            <div class="user_nickname text_ellipsis">{{ info.nickname }}</div>
            <img
              class="user_sex"
              :src="
                require(`@/assets/images/common/${
                  info.sex == 1 ? 'man' : 'female'
                }.png`)
              "
              alt=""
            />
            <div class="user_age text_justify">{{ info.age }} 岁</div>
          </div>
          <div class="detail_row2">当前状态：在线</div>
        </div>
      </div>

      <div class="block_item tag_info">
        <div class="tag_title bottom_line">咨询师标签</div>
        <div class="tag_box">
          <div
            class="tag_item flex_row flex_align_center"
            :class="{ bottom_line: calcBottom(i) }"
            v-for="(r, i) in info.icon"
            :key="i"
          >
            <div class="tag_img">
              <img style="display: block" :src="joinUrlImg(r.icon)" alt="" />
            </div>
            <div class="tag_name">{{ r.name }}</div>
          </div>
        </div>
      </div>

      <div class="block_item">
        <!-- <div class="info_item bottom_line info_primary">
          <div class="info_label">我咨询过：</div>
          <div class="info_ctt color_black">{{ info.consultant_num }}次</div>
        </div> -->
        <div class="info_item bottom_line info_primary">
          <div class="info_label">负责部门：</div>
          <div class="info_ctt color_black">{{ info.department_name }}</div>
        </div>
        <div class="info_item bottom_line info_school">
          <div class="info_label">所在单位：</div>
          <div class="info_ctt text_align">
            <div class="info_ctt_unit color_black">{{ info.unit_name }}</div>
            <div class="info_ctt_address color_grey">{{ info.address }}</div>
          </div>
        </div>
        <div class="info_item info_breif">
          <div class="info_label">专家简介：</div>
          <div class="info_ctt color_grey">
            {{ info.intro || "暂无简介" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { apiGetUserInfo } from "@/api/consult.js";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  data() {
    return {
      info: {},
    };
  },
  methods: {
    joinUrlImg,
    // 获取咨询师信息
    async getUserInfo() {
      const { data } = await apiGetUserInfo({ uid: this.$route.params.id });
      if (data.code == 200) {
        this.info = data.data;
      }
    },
  },
  computed: {
    calcBottom() {
      return (index) => {
        let list = [1, 2, 3, 4, 5];
        if (list.length % 2 == 0) {
          return index <= list.length - 2 - 1;
        } else {
          return index <= list.length - 1 - 1;
        }
      };
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}
.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  display: grid;
  gap: 10.42px;
  align-content: flex-start;
}
.text_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_justify {
  text-align: justify;
  word-break: keep-all;
}
.bottom_line {
  position: relative;
}
.bottom_line::before {
  display: block;
  width: 100%;
  height: 0.35px;
  background: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}

.block_item {
  width: 100%;
  height: fit-content;
  background: #ffffff;
  border-radius: 6.94px;
  box-sizing: border-box;
}
.tag_info {
  padding: 0 10.42px;
}
.user_avatar {
  width: 62.5px;
  height: 62.5px;
  border-radius: 10.41px;
}
.user_info {
  display: flex;
  gap: 14.24px;
  padding: 10.42px;
}
.user_nickname {
  width: fit-content;
  max-width: 120px;
  height: 20.14px;
  font-size: 17.36px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  margin-right: 6.6px;
}
.user_sex {
  width: 16.67px;
  height: 20.14px;
  margin-right: 6.25px;
}
.user_age {
  /* width: 34.38px; */
  height: 16.32px;
  font-size: 16.67px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  margin-right: 6.25px;
}

.user_detail {
  width: calc(100% - 65.98px);
  display: grid;
  gap: 13.54px;
  align-content: space-between;
  padding-top: 4.86px;
}
.detail_row1 {
  display: flex;
  line-height: 20.14px;
}
.detail_row2 {
  max-width: 236.11px;
  height: 20.83px;
  line-height: 20.83px;
  font-size: 13.19px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #aaaaaa;
}

.tag_title {
  height: 41.67px;
  line-height: 41.67px;
  font-size: 15.97px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
}

.tag_box {
  display: flex;
  flex-wrap: wrap;
}
.tag_item {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 13.89px;
  height: 41.67px;
  line-height: 41.67px;
  font-size: 13.89px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #555555;
}
.tag_img {
  width: 22.57px;
  height: 22.57px;
}
.tag_img img {
  width: 100%;
  height: 100%;
}

.info_item {
  padding: 10.9px 10.76px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  line-height: 23.34px;
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
}
.info_lable {
  width: 62.85px;
  color: #555555;
}
.color_black {
  color: #333333;
}
.color_grey {
  color: #888888;
}
.text_align {
  text-align: right;
}
.info_breif {
  display: block;
}
.info_breif .info_label {
  margin-bottom: 10.9px;
}
.info_item:not(.info_breif) .info_ctt {
  max-width: calc(100% - 73px);
}
/* .info_primary .info_ctt {
    max-width: calc( 100% - 73px );
} */
</style>